<template>
	<view>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
        <wlk-navbar title="商品列表" navbarType='3'></wlk-navbar>
        <view class="goods-content">
            <u-sticky>
                <view class="head-box pd30">
                    <u-search placeholder="请输入关键词" v-model="keyword" :actionStyle="{
                color:themeColor
            }" height="38" @search="init" @custom="init" @change="change"  actionText="搜索" :searchIconColor="themeColor"></u-search>
                </view>
            </u-sticky>
            <block v-if="loadStatus=='nomore' && list.length==0">
                <view class="not-data">
                    <u-empty
                            :icon="uEmpty.search"
                            text="没有搜索结果"
                    >
                    </u-empty>
                </view>
            </block>
            <block v-else>
                <view class="goods-list wlkflex justify-between pd30 wrap">
                    <view class="item br08 overHidden mb20" v-for="(item,index) in list" @click="$Router.push('/pages/goods/detail?id='+item.id)">
                        <image :src="item.images[0]" class="block" mode="aspectFill"></image>
                        <view class="pd20">
                            <view class="u-line-1 title">{{item.title}}</view>
                            <view class="money mt10">
                                <view class="vip wlkflex br04 overHidden">
                                    <view class="name" :style="{backgroundColor: themeColor}">会员价</view>
                                    <text class="vip_price"><text class="mr05">¥</text>{{item.vip_price}}</text>
                                </view>
                            </view>
                            <view class="price mt10 wlkflex justify-between wd100">
                                <view class="left">
                                    <text class="mr05">¥</text>{{item.price}}
                                </view>
                                <view class="right">
                                    已售{{item.sales}}
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="load-more">
                    <u-loadmore :status="loadStatus" :loading-text="loadingText"  :loadmore-text="loadmoreText" :nomore-text="nomoreText" dashed  line />
                </view>
            </block>

        </view>

    </view>
</template>

<script>
    var _self;
    import { toUrl } from '@/wlkutils/tools';
    import share from "@/wlkutils/share";
    import { mapGetters} from 'vuex';
	export default {
        computed:{
            ...mapGetters(['themeColor','uEmpty']),
        },
		data() {
			return {
                keyword:'',
                list:[],
                page: 1,
                loadStatus:'loading',
                loadingText: '努力加载中',
                loadmoreText: '轻轻上拉',
                nomoreText: '实在没有了',

			};
		},
		onLoad(option) {
            if(option.keyword){
                this.keyword = option.keyword;
            }
		    _self = this;
        },
		onShow() {
            this.loadStatus = 'loading';
            this.page = 1;
            this.list = [];
            this.getData();
		},
        onShareAppMessage(res){
            return share.setShareInfo();
        },
        onReachBottom() {
            if(this.loadStatus == "nomore"){
                return;
            }
            this.page++;
            this.getData();
        },
		methods: {
            init(){
                this.loadStatus = 'loading';
                this.page = 1;
                this.list = [];
                this.getData();
            },
            change(v){
                if(uni.$u.test.isEmpty(v)){
                    this.init();
                }
            },
            async getData() {
                const res = await uni.$u.http.post("goods/getList", {
                    keyword: this.keyword,
                    page: this.page,
                    type:'search'
                });
                if (res && res.data && res.data.rows) {
                    this.list = this.list.concat(res.data.rows);
                }
                this.loadStatus = res.data.rows.length < res.data.limit ? 'nomore' : 'loadmore';
            },
		},
	};
</script>

<style lang="scss">
    .goods-content {
        .head-box{
            background-color: #FFFFFF;
        }
        .goods-list{
            .item{
                width: 48%;
                background-color: #FFFFFF;
                image{
                    width: 100%;
                    height: 300rpx;
                }
                .title{
                    font-size: $font-base;
                    font-weight: bold;
                }
                .desc{
                    color: $uni-text-color-grey;
                    font-size: $font-base;
                }
                .money{
                    font-size: $font-base;
                    .vip{
                        .name{
                            font-size: $font-base;
                            color: #FFE785;
                            padding: 6rpx 10rpx;

                        }
                        .vip_price{
                            background-color: $-wash-wait-color;
                            padding: 6rpx 10rpx;
                            border-radius: 0 4px 4px 0;
                        }
                    }
                }
                .price{
                    .left{
                        color: $-wash-price-color;
                    }
                    .right{
                        font-size: $font-sm;
                        color: $uni-text-color-grey;
                        text-align: right;
                    }

                }
            }
        }
    }
</style>
